<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="gly"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta charset="GB18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/main.css">

</head>
<body style="margin-top: -50px">
	<div class="panel panel-default" style="margin-top: 0px">
		<div class="panel-heading">
			<h3 class="panel-title">
				<i class="glyphicon glyphicon-th"></i> 规费记录
			</h3>
		</div>

		<div class="panel-body">
			<form class="form-inline" role="form" style="float: left;">

				<div class="form-group has-feedback">
					<div class="input-group">
						<div class="input-group-addon">车牌号码</div>
						<input class="form-control has-success" type="text"
							placeholder="支持模糊查询" id="searchCondition" /> <input
							id="condition" type="text" hidden value="" /> <input id="pn"
							type="text" hidden value="1" />
					</div>
				</div>
				<button type="button" class="btn btn-warning" id="search_btn">
					<i class="glyphicon glyphicon-search"></i> 查询
				</button>
			</form>

			<button class="btn btn-danger"
				style="float: right; margin-left: 10px;" id="delCars_btn">
				<i class=" glyphicon glyphicon-remove"></i> 批量删除
			</button>
			<button class="btn btn-info" style="float: right; margin-left: 10px;"
				id="add">
				<i class=" glyphicon glyphicon-plus"></i> 新增
			</button>
			<br>
			<hr style="clear: both;">
			<div class="table-responsive">
				<table class="table  table-bordered">
					<thead>
						<tr>
							<th width="30">#</th>
							<th width="30"><input type="checkbox" id="selectAll"></th>
							<th>车牌号码</th>
							<th>规费名称</th>
							<th>缴费时间</th>
							<th>规费金额</th>
							<th>收费单位</th>
							<th>经办人</th>
							<th>备注</th>
							<th width="125">操作</th>
						</tr>
					</thead>
					<!-- 信息展示 -->
					<tbody id="tb1">
					</tbody>
				</table>
			</div>
			<!-- 分页信息 -->
			<div class="row" id="page_div"></div>
		</div>
	</div>

	<!-- 新增/修改模态框 -->
	<div class="modal fade" id="chargesModel" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">新增车辆信息</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" id="form1">
						<input type="text" id="inputcgId" name="cgId" hidden>
						<div class="form-group">
							<label for="inputcgCarlicense" class="col-sm-2 control-label">车牌号码</label>
							<div class="col-sm-10">

								<select class="form-control" id="inputcgCarlicense"
									name="cgCarlicense">
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="inputcgName" class="col-sm-2 control-label">规费名称</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputcgName"
									name="cgName" placeholder="请输入规费名称" required="required">
							</div>
						</div>
						<div class="form-group">
							<label for="inputcgTime" class="col-sm-2 control-label">缴费时间</label>
							<div class="col-sm-10">
								<input type="date" class="form-control" id="inputcgTime"
									name="cgTime" required="required" >
							</div>
						</div>
						<div class="form-group">
							<label for="inputcgAmount" class="col-sm-2 control-label">缴费金额</label>
							<div class="col-sm-10">
								<input type="number" class="form-control" id="inputcgAmount"
									name="cgAmount" placeholder="请输入缴费金额" required="required">
							</div>
						</div>
						<div class="form-group">
							<label for="inputcgUnit" class="col-sm-2 control-label">收费单位</label>
							<div class="col-sm-10">
								<select class="form-control" id="inputcgUnit" name="cgUnit">

								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="inputcgDriver" class="col-sm-2 control-label">经办人</label>
							<div class="col-sm-10">
								<select class="form-control" id="inputcgDriver" name="cgDriver">
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="inputcgRemark" class="col-sm-2 control-label">备注</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="inputcgRemark"
									name="cgRemark" placeholder="请输入备注" required="required">
							</div>
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="sub1">保存</button>
				</div>

			</div>
		</div>
	</div>
	<!-- 新增修改模态框结束 -->
	<!-- 详细信息模态框 -->
	<div class="modal fade" id="carInfoModel" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">车辆详细信息</h4>
				</div>
				<div class="modal-body">
					<table class="table  table-bordered">
						<thead>
							<tr>
								<th width="200px;">名称</th>
								<th>内容</th>

							</tr>
						</thead>
						<tbody id="info_tb">

						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				</div>

			</div>
		</div>
	</div>
	<!-- 详细信息模态框结束 -->
	<script
		src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/script/docs.min.js"></script>
	<script type="text/javascript">
$(function() {
	
	loadCharges();	
	
	//复选框的选中与取消
	$("#selectAll").change(function() {
		if ($(this).prop('checked') == true) {
			$('input[name="cb"]').each(function() {
				$(this).prop('checked', true);
			})
		} else {
			$('input[name="cb"]').each(function() {
				$(this).prop('checked', false);
			})
		}

	});
	//批量删除
	$("#delCars_btn")
			.click(
					function() {
						var ids = [];
						$(":checkbox[name=cb]:checked").each(
								function() {
									ids.push($(this).val());
								});
						if (ids.length == 0) {
							alert("请选择删除记录");
							return;
						}
						if (confirm("是否删除？")) {
							$
									.ajax({
										url : "${pageContext.request.contextPath}/charges/delete",
										type : "post",
										data : {
											"cgId" : ids
													.join(",")
										},
										success : function(data) {
											
											loadCharges();	
										}
									})
						}

					});
	
	//查询
	$("#search_btn").click(function() {
		var searchcondition = $("#searchCondition").val();
		$("#condition").val(searchcondition);
		$("#pn").val(1);
		loadCharges();	
	})
	
	//新增
	$("#add")
			.click(
					function() {
						$("#myModalLabel").html("新增规费信息");
						$
								.ajax({
									url : "${pageContext.request.contextPath}/charges/add",
									type : "get",
									dataType : "json",
									success : function(data) {
										var charges = data.charges;
										var driverList = data.driverList;
										var carList = data.carList;
										var carListStr = "";
										for (var i = 0; i < carList.length; i++) {
											carListStr = carListStr
													+ "<option>"
													+ carList[i]
													+ "</option>";
										}
										$("#inputcgCarlicense").html(
												carListStr);
										var chargesStr = "";
										for (var i = 0; i < charges.length; i++) {
											chargesStr = chargesStr
													+ "<option>"
													+ charges[i]
													+ "</option>";
										}
										$("#inputcgUnit").html(
												chargesStr);
										var driverListStr = "";
										for (var i = 0; i < driverList.length; i++) {
											driverListStr = driverListStr
													+ "<option>"
													+ driverList[i]
													+ "</option>";
										}
										$("#inputcgDriver")
												.html(driverListStr);
										
										$("#inputcgCarlicense").prop(
												"disabled", false);
										var da = new Date().format('yyyy-MM-dd');
										$("#inputcgTime").val(da);
										
									}
								});

						$('#chargesModel').modal('show');
					})
					
					
					//保存新增或修改
					$("#sub1")
							.click(
									function() {
										if ($("#inputcgCarlicense").prop("disabled") == true) {
											$
													.ajax({
														url : "${pageContext.request.contextPath}/charges/doUpdate",
														type : "post",
														data : $("#form1")
																.serialize(),
														error : function() {
															alert("请输入正确日期格式");
														},
														success : function(data) {
															$('#chargesModel').modal(
																	'hide');
															loadCharges();
														}

													});
										} else {
											
											$
													.ajax({
														url : "${pageContext.request.contextPath}/charges/doAdd",
														type : "post",
														data : $("#form1")
																.serialize(),
														error : function() {
															alert("请输入正确日期格式");
														},
														success : function(data) {
															$('#chargesModel').modal(
																	'hide');
															loadCharges();	
														}

													});
										}
									});
	$('#chargesModel').on('hidden.bs.modal', function() {
		$("#form1")[0].reset();
	})

})

</script>
	<script type="text/javascript">

		    //数据加载
			function loadCharges() {
				var pn = $("#pn").val();
				var condition = $("#condition").val();			
				$
						.ajax({
							url : "${pageContext.request.contextPath}/charges/getAll",
							type : "post",
							dataType : "json",
							data : {
								"pn" : pn,
								"condition" : condition
							},
							success : function(data) {
								var list = data.list;
								var trStr = "";
								for (var i = 0; i < list.length; i++) {
									trStr = trStr + "<tr>";
									trStr = trStr + "<td>" + (i + 1) + "</td>";
									trStr = trStr
											+ "<td><input type='checkbox' value='"+list[i].cgId+"' name='cb'></td>";
									trStr = trStr + "<td>" + list[i].cgCarlicense
											+ "</td>";
									trStr = trStr + "<td>" + list[i].cgName
											+ "</td>";
									trStr = trStr + "<td>" + list[i].cgTime
											+ "</td>";
									trStr = trStr + "<td>" + list[i].cgAmount
											+ "</td>";
									trStr = trStr + "<td>" + list[i].cgUnit
											+ "</td>";
									trStr = trStr + "<td>" + list[i].cgDriver
											+ "</td>";
									trStr = trStr + "<td>" + list[i].cgRemark
											+ "</td>";
									trStr = trStr + "<td>";
									
									trStr = trStr
											+ "<button type='button' class='btn btn-primary  btn-xs' name='updateCharges' cgId='"+list[i].cgId+"'><i class=' glyphicon glyphicon-pencil'></i></button>";
									trStr = trStr + "&nbsp";
									trStr = trStr + "&nbsp";
									trStr = trStr + "&nbsp";
									trStr = trStr
											+ "<button type='button' class='btn btn-danger   btn-xs' name='delCharges' cgId='"+list[i].cgId+"'><i class=' glyphicon glyphicon-remove'></i></button>";
									trStr = trStr + "</td>";
									trStr = trStr + "</tr>";
								}
								$("#tb1").html(trStr);
								var divStr = "";
								divStr = divStr + "<div align='center'>";
								divStr = divStr + "<ul class='pagination'>";
								divStr = divStr
										+ "<li><a href='javascript:changePage(1)'>首页</a></li>";
								divStr = divStr + "<li>";
								if (data.hasPreviousPage) {
									divStr = divStr
											+ "<a href='javascript:changePage(-1)' aria-label='Previous'> <span aria-hidden='true'>«</span></a>";
								}
								divStr = divStr + "</li>";
								var navigatepageNums = data.navigatepageNums;
								for (var i = 0; i < navigatepageNums.length; i++) {
									if (navigatepageNums[i] == data.pageNum) {
										divStr = divStr
												+ "<li class='active'><a href='#'>"
												+ navigatepageNums[i]
												+ "</a></li>";
									}
									if (navigatepageNums[i] != data.pageNum) {
										divStr = divStr
												+ "<li><a href='javascript:changePage("
												+ navigatepageNums[i] + ")'>"
												+ navigatepageNums[i]
												+ "</a></li>";
									}
								}
								divStr = divStr + "<li>";
								if (data.hasNextPage) {
									divStr = divStr
											+ "<a href='javascript:changePage(-2)' aria-label='Next'> <span aria-hidden='true'>»</span> </a>";
								}
								divStr = divStr + "</li>";

								divStr = divStr
										+ "<li><a href='javascript:changePage("
										+ data.pages + ")'>尾页</a></li>";
								divStr = divStr + "</ul>";
								divStr = divStr + "</div>";
								divStr = divStr + "<div align='center'>当前第 "
										+ data.pageNum + " 页.总共 " + data.pages
										+ " 页.一共 " + data.total + " 条记录</div>";
								$("#page_div").html(divStr);
								//绑定函数
								deleteCharges();
								updateCharges();
								carInfo();
							}

						});

			}
			//翻页
			function changePage(page) {
				var pn = $("#pn").val();
				if (page == -1) {
					$("#pn").val(pn - 1);
				} else if (page == -2) {
					var pn1 = parseInt(pn);
					$("#pn").val(pn1 + 1);
				} else {
					$("#pn").val(page);
				}

				loadCharges();
			}
			//单个删除
			function deleteCharges() {
				$("[name=delCharges]").click(function() {
					var cgId = $(this).attr("cgId");
					
					$.ajax({
						url : "${pageContext.request.contextPath}/charges/delete",
						type : "post",
						data : {
							"cgId" : cgId
						},
						success : function(data) {
							loadCharges();
						}
					})

				});
			}
			//修改
			function updateCharges() {
				$("[name=updateCharges]")
						.click(
								function() {
									$("#myModalLabel").html("修改规费信息");
									var cgId = $(this).attr("cgId");
									$
											.ajax({
												url : "${pageContext.request.contextPath}/charges/update?cgId=" + cgId,
												type : "get",
												dataType : "json",
												success : function(data) {
													var charge = data.charge;
													var charges = data.charges;
													var driverList = data.driverList;
													var carList = data.carList;
													
													$("#inputcgId").val(charge.cgId);
													var carListStr = "";
													for (var i = 0; i < carList.length; i++) {
														
														if (carList[i] == charge.cgCarlicense) {
															
															carListStr = carListStr + 
															"<option selected>" + carList[i]
																	+ "</option>";
														} else {
															carListStr = carListStr
																	+ "<option>"
																	+ carList[i]
																	+ "</option>";
														}
													}
													
													$("#inputcgCarlicense").html(carListStr);
													$("#inputcgCarlicense").prop("disabled", true);
													$("#inputcgName").val(charge.cgName);
									
													$("#inputcgTime").val(charge.cgTime);
													$("#inputcgAmount").val(charge.cgAmount);
										
													var chargesStr = "";
													for (var i = 0; i < charges.length; i++) {
														if (charges[i] == charge.cgUnit) {
															chargesStr = chargesStr
																	+ "<option selected>"
																	+ charges[i]
																	+ "</option>";
														} else {
															chargesStr = chargesStr
																	+ "<option>"
																	+ charges[i]
																	+ "</option>";
														}
													}
													$("#inputcgUnit").html(chargesStr);
													var driverListStr = "";
													
													for (var i = 0; i < driverList.length; i++) {
														if (driverList[i] == charge.cgDriver) {
															driverListStr = driverListStr
																	+ "<option selected>"
																	+ driverList[i]
																	+ "</option>";
														} else {
															driverListStr = driverListStr
																	+ "<option>"
																	+ driverList[i]
																	+ "</option>";
														}
													}
													$("#inputcgDriver").html(driverListStr);
													
													$("#inputcgRemark").val(charge.cgRemark);
												}
											});

									$('#chargesModel').modal('show');
								})
			}

			Date.prototype.format = function(format){
			    var o = {
			        "M+" : this.getMonth()+1, //month
			        "d+" : this.getDate(), //day
			        "H+" : this.getHours(), //hour
			        "m+" : this.getMinutes(), //minute
			        "s+" : this.getSeconds(), //second
			        "q+" : Math.floor((this.getMonth()+3)/3), //quarter
			        "S" : this.getMilliseconds() //millisecond
			    }
			 
			    if(/(y+)/.test(format)) {
			        format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
			    }
			 
			    for(var k in o) {
			        if(new RegExp("("+ k +")").test(format)) {
			            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
			        }
			    }
			    return format;
			}
		</script>
</body>
</html>